<template>
  <div class="user-center">
    <!-- 头部信息栏 -->
    <div class="header-info">
      <div class="avatar-info">
        <el-avatar :size="80" :src="user.avatarUrl || defaultAvatar" @click="changeAvatar" class="avatar"></el-avatar>
        <div class="user-name-info">
          <div class="username">{{ user.username }} Lv.{{ user.level }}</div>
          <div class="identity">bilibili UP主认证：bilibili知名数学UP主</div>
          <div class="signature">{{ user.signature || '暂无签名' }}</div>
          <div class="uid">UID:{{ user.id }}</div>
        </div>
      </div>
      <div class="stats-info">
        <div class="stat-item">
          <span class="stat-value" @click="handleClick(user.fansCount,'的 粉丝数')">{{
              formatNumber(user.fansCount)
            }}</span>
          <span class="stat-label">粉丝</span>
        </div>
        <div class="stat-item">
          <span class="stat-value" @click="handleClick(user.followsCount,'的 关注数')">{{
              formatNumber(user.followsCount)
            }}</span>
          <span class="stat-label">关注</span>
        </div>
        <div class="stat-item">
          <span class="stat-value" @click="handleClick(user.likeCount,'的 总获赞数')">{{
              formatNumber(user.likeCount)
            }}</span>
          <span class="stat-label">获赞</span>
        </div>
      </div>
    </div>

    <el-dialog
        v-model="dialogVisible"
        center
        :title="showTitle"
        style="max-width: 300px">
      <div style="text-align: center; font-size: 26px; font-weight: bold">
        <p>{{ showValue }}</p>
      </div>
      <template #footer>
        <el-button @click="dialogVisible = false">确定</el-button>
      </template>
    </el-dialog>

    <!-- 主体内容部分 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <div class="sidebar-header">
          <span class="icon-person"></span>
          <span class="title">个人中心</span>
        </div>
        <ul class="sidebar-menu">
          <li class="menu-item" :class="{ active: activeMenu === 'profile' }" @click="handleMenuClick('profile')">
            <span class="icon-profile"></span>
            <span class="menu-text">个人简介</span>
          </li>
          <li class="menu-item" :class="{ active: activeMenu === 'post_CanteenShop' }"
              @click="handleMenuClick('post_CanteenShop')">
            <span class="icon-post"></span>
            <span class="menu-text">发帖-食堂店铺</span>
          </li>
          <li class="menu-item" :class="{ active: activeMenu === 'post_Playground' }"
              @click="handleMenuClick('post_Playground')">
            <span class="icon-post"></span>
            <span class="menu-text">发帖-操场&运动场</span>
          </li>
          <li class="menu-item" :class="{ active: activeMenu === 'post_TeachingBuilding' }"
              @click="handleMenuClick('post_TeachingBuilding')">
            <span class="icon-post"></span>
            <span class="menu-text">发帖-教学楼&学院楼</span>
          </li>
          <li class="menu-item" :class="{ active: activeMenu === 'post_MaimaiChunithm' }"
              @click="handleMenuClick('post_MaimaiChunithm')">
            <span class="icon-post"></span>
            <span class="menu-text">发帖-舞萌/中二出勤</span>
          </li>
          <li class="menu-item" :class="{ active: activeMenu === 'fans' }" @click="handleMenuClick('fans')">
            <span class="icon-fans"></span>
            <span class="menu-text">粉丝</span>
          </li>
          <li class="menu-item" :class="{ active: activeMenu === 'follow' }" @click="handleMenuClick('follow')">
            <span class="icon-follow"></span>
            <span class="menu-text">关注</span>
          </li>
        </ul>
      </div>
      <!-- 简介内容 -->
      <div class="intro-content">
        <div v-if="activeMenu === 'fans'" style="overflow-y: auto">
          <div class="intro-header">
            <span class="section-title">粉丝列表</span>
          </div>
          <el-pagination
              :current-page="fansPageNum"
              :page-size="fansPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              :total="fansTotal"
              @current-change="handleFansPageChange"
              @size-change="handleFansSizeChange">
          </el-pagination>
          <div class="fan-cards">
            <div class="fan-card" v-for="fan in fansList" :key="fan.trackId">
              <el-avatar :size="50" :src="fan.fansAvatarUrl || defaultAvatar" class="fan-avatar"></el-avatar>
              <div class="fan-info" style="text-align: left">
                <div class="fan-username">{{ fan.fansUserName }}</div>
                <div class="fan-signature">{{ fan.fansSignature || '暂无个性签名' }}</div>
              </div>
              <div class="fan-track-time">{{ formatTime(fan.trackTime) }}</div>
            </div>
          </div>
        </div>
        <div v-if="activeMenu === 'follow'" style="overflow-y: auto">
          <div class="intro-header">
            <span class="section-title">关注列表</span>
          </div>
          <el-pagination
              :current-page="followsPageNum"
              :page-size="followsPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              :total="followsTotal"
              @current-change="handleFollowsPageChange"
              @size-change="handleFollowsSizeChange">
          </el-pagination>
          <div class="fan-cards">
            <div class="fan-card" v-for="follows in followsList" :key="follows.trackId">
              <el-avatar :size="50" :src="follows.followsAvatarUrl || defaultAvatar" class="fan-avatar"></el-avatar>
              <div class="fan-info" style="text-align: left">
                <div class="fan-username">{{ follows.followsUserName }}</div>
                <div class="fan-signature">{{ follows.followsSignature || '暂无个性签名' }}</div>
              </div>
              <div class="fan-track-time">{{ formatTime(follows.trackTime) }}</div>
            </div>
          </div>
        </div>
        <div v-if="activeMenu === 'profile'">
          <div class="intro-header">
            <span class="section-title">简介</span>
            <el-button type="primary" size="small" class="operation-button">操作</el-button>
          </div>
          <table class="intro-table">
            <tbody>
            <tr>
              <th>头像</th>
              <td>
                <el-avatar :size="50" :src="user.avatarUrl || defaultAvatar"></el-avatar>
              </td>
              <th>账户名</th>
              <td>{{ user.username }}</td>
            </tr>
            <tr>
              <th>昵称</th>
              <td>{{ user.nickname || user.username }}</td>
              <th>年龄</th>
              <td>{{ user.age || '未知' }}</td>
            </tr>
            <tr>
              <th>性别</th>
              <td>
                <el-tag type="success" v-if="user.gender === '男'">男</el-tag>
                <el-tag type="danger" v-if="user.gender === '女'">女</el-tag>
                {{ user.gender || '未填写' }}
              </td>
              <th>邮箱Email</th>
              <td>{{ user.email || '未填写' }}</td>
            </tr>
            <tr>
              <th>手机号码</th>
              <td>{{ user.phone || '未填写' }}</td>
              <th>地区</th>
              <td>{{ user.region || '未填写' }}</td>
            </tr>
            <tr>
              <th>职业</th>
              <td>{{ user.occupation || '未填写' }}</td>
              <th>兴趣爱好</th>
              <td>{{ user.hobbies || '未填写' }}</td>
            </tr>
            <tr>
              <th>个性签名</th>
              <td>{{ user.signature || '未填写' }}</td>
              <th>注册日期</th>
              <td>{{ formatTime(user.createTime) }}</td>
            </tr>
            </tbody>
          </table>
        </div>
        <div v-if="activeMenu === 'post_CanteenShop'" style="overflow-y: auto">
          <div class="intro-header">
            <span class="section-title">食堂店铺列表</span>
          </div>
          <el-pagination
              :current-page="canteenShopPageNum"
              :page-size="canteenShopPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              :total="canteenShopTotal"
              @current-change="handleCanteenShopPageChange"
              @size-change="handleCanteenShopSizeChange">
          </el-pagination>
          <div class="canteen-shop-cards">
            <div class="canteen-shop-card" v-for="shop in canteenShopList" :key="shop.id"
                 @click="goToCanteenShopDetail(shop.shopId)">
              <img :src="shop.shopImage || defaultAvatar" alt="食堂店铺图片" class="canteen-shop-image">
              <div class="canteen-shop-info" style="text-align: left">
                <div class="canteen-shop-name">{{ shop.shopName }}</div>
                <div class="canteen-shop-description">{{
                    shop.shopDescription.length > 20 ? shop.shopDescription.slice(0, 20) + '...' : shop.shopDescription
                  }}
                </div>
                <div class="canteen-shop-view">{{ shop.shopCreateTime }}
                  <el-icon>
                    <View/>
                  </el-icon>
                  {{ shop.shopView }}
                  <el-icon>
                    <Comment/>
                  </el-icon>
                  {{ shop.shopCommentCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeMenu === 'post_Playground'" style="overflow-y: auto">
          <div class="intro-header">
            <span class="section-title">操场&运动场列表</span>
          </div>
          <el-pagination
              :current-page="playgroundPageNum"
              :page-size="playgroundPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              :total="playgroundTotal"
              @current-change="handlePlaygroundPageChange"
              @size-change="handlePlaygroundSizeChange">
          </el-pagination>
          <div class="playground-cards">
            <div class="playground-card" v-for="playground in playgroundList" :key="playground.contentId"
                 @click="goToPlaygroundDetail(playground.contentId)">
              <img :src="playground.contentImage || defaultAvatar" alt="操场&运动场图片" class="playground-image">
              <div class="playground-info" style="text-align: left">
                <div class="playground-title">{{ playground.contentTitle }}</div>
                <div class="playground-description">{{
                    playground.contentDescription.length > 20 ? playground.contentDescription.slice(0, 20) + '...' : playground.contentDescription
                  }}
                </div>
                <div class="playground-view">{{ formatTime(playground.contentCreateTime) }}
                  <el-icon>
                    <View/>
                  </el-icon>
                  {{ playground.playgroundView }}
                  <el-icon>
                    <Comment/>
                  </el-icon>
                  {{ playground.playgroundCommentCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeMenu === 'post_TeachingBuilding'" style="overflow-y: auto">
          <div class="intro-header">
            <span class="section-title">教学楼&学院楼列表</span>
          </div>
          <el-pagination
              :current-page="teachingBuildingPageNum"
              :page-size="teachingBuildingPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              :total="teachingBuildingTotal"
              @current-change="handleTeachingBuildingPageChange"
              @size-change="handleTeachingBuildingSizeChange">
          </el-pagination>
          <div class="teaching-building-cards">
            <div class="teaching-building-card" v-for="building in teachingBuildingList" :key="building.contentId"
                 @click="goToTeachingBuildingDetail(building.contentId)">
              <img :src="building.contentImage || defaultAvatar" alt="教学楼&学院楼图片"
                   class="teaching-building-image">
              <div class="teaching-building-info" style="text-align: left">
                <div class="teaching-building-title">{{ building.contentTitle }}</div>
                <div class="teaching-building-description">{{
                    building.contentDescription.length > 20 ? building.contentDescription.slice(0, 20) + '...' : building.contentDescription
                  }}
                </div>
                <div class="teaching-building-view">{{ formatTime(building.contentCreateTime) }}
                  <el-icon>
                    <View/>
                  </el-icon>
                  {{ building.contentView }}
                  <el-icon>
                    <Comment/>
                  </el-icon>
                  {{ building.contentCommentCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="activeMenu === 'post_MaimaiChunithm'" style="overflow-y: auto">
          <div class="intro-header">
            <span class="section-title">舞萌/中二出勤列表</span>
          </div>
          <el-pagination
              :current-page="maimaiChunithmPageNum"
              :page-size="maimaiChunithmPageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :page-sizes="[10, 20, 50, 100]"
              :total="maimaiChunithmTotal"
              @current-change="handleMaimaiChunithmPageChange"
              @size-change="handleMaimaiChunithmSizeChange">
          </el-pagination>
          <div class="maimai-chunithm-cards">
            <div class="maimai-chunithm-card" v-for="item in maimaiChunithmList" :key="item.contentId"
                 @click="goToMCDetail(item.contentId)">
              <img :src="item.contentImage || defaultAvatar" alt="舞萌/中二出勤图片" class="maimai-chunithm-image">
              <div class="maimai-chunithm-info" style="text-align: left">
                <div class="maimai-chunithm-title">{{ item.shopName }} - {{ item.gameCategory }}</div>
                <div class="maimai-chunithm-description">{{
                    item.gameDescription.length > 20 ? item.gameDescription.slice(0, 20) + '...' : item.gameDescription
                  }}
                </div>
                <div class="maimai-chunithm-view">{{ formatTime(item.contentCreateTime) }}
                  <el-icon>
                    <View/>
                  </el-icon>
                  {{ item.contentView }}
                  <el-icon>
                    <Comment/>
                  </el-icon>
                  {{ item.contentCommentCount }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import axios from 'axios'
import {ElLoading, ElMessage} from "element-plus";
import router from "@/router/index.ts";
import {Comment, Shop, View} from "@element-plus/icons-vue";

const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png  '

const user = ref({
  id: 0,
  username: '',
  level: 1,
  avatarUrl: '',
  editTimes: 0,
  createTime: '',
  recentLoginTime: '',
  // 新增字段 2025/4/24
  signature: '',
  fansCount: 0,
  followsCount: 0,
  likeCount: 0,
  nickname: '',
  age: 0,
  gender: '',
  email: '',
  phone: '',
  region: '',
  occupation: '',
  hobbies: ''
})

//点击点赞数，关注数，粉丝数弹出框
const dialogVisible = ref(false);
const showValue = ref(0);
const showTitle = ref('');
const currentUserName = ref(localStorage.getItem('username'))
const handleClick = (value, title) => {
  showTitle.value = currentUserName.value + title;
  showValue.value = value;
  dialogVisible.value = true;
};

// 侧边栏菜单交互
const activeMenu = ref('profile');
const handleMenuClick = (menu) => {
  activeMenu.value = menu;
  if (menu === 'fans') {
    handleFansPageChange(1);
  } else if (menu === 'follow') {
    handleFollowsPageChange(1);
  } else if (menu === 'profile') {
    fetchUserData();
  } else if (menu === 'post_CanteenShop') {
    handleCanteenShopPageChange(1);
  } else if (menu === 'post_Playground') {
    handlePlaygroundPageChange(1);
  } else if (menu === 'post_TeachingBuilding') {
    handleTeachingBuildingPageChange(1);
  } else if (menu === 'post_MaimaiChunithm') {
    handleMaimaiChunithmPageChange(1);
  }
  // 这里可以添加具体的菜单点击逻辑，比如切换页面内容等
  console.log(`点击了 ${menu} 菜单`);
};

// 格式化时间显示
const formatTime = (time) => {
  if (!time) return '暂无记录'
  return new Date(time).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  }).replace(/\//g, '-')
}

// 格式化数字显示
const formatNumber = (num) => {
  num = Number(num) || 0;
  if (num < 10000) {
    return num.toString();
  } else if (num < 100000000) {
    return (num / 10000).toFixed(1) + '万';
  } else {
    return (num / 100000000).toFixed(1) + '亿';
  }
}

// 获取用户信息
const fetchUserData = async () => {
  try {
    const userId = localStorage.getItem('id') // 假设用户ID存储在localStorage
    if (!userId) {
      console.error('未获取到用户ID')
      return
    }

    const response = await axios.get("/user/" + userId)
    if (response.data) {
      const userData = response.data.data
      user.value = {
        id: userData.id,
        username: userData.username,
        level: userData.level,
        avatarUrl: userData.avatarUrl,
        editTimes: userData.editTimes,
        createTime: userData.createTime,
        recentLoginTime: userData.recentLoginTime,
        // 新增字段赋值
        signature: userData.signature,
        fansCount: userData.fansCount,
        followsCount: userData.followsCount,
        likeCount: userData.likeCount,
        nickname: userData.nickname,
        age: userData.age,
        gender: userData.gender,
        email: userData.email,
        phone: userData.phone,
        region: userData.region,
        occupation: userData.occupation,
        hobbies: userData.hobbies
      }
      console.log('用户信息获取成功:', user.value)
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    // 可以在这里添加错误处理，比如显示提示信息
  }
}

// 修改头像
const changeAvatar = () => {
  // 创建隐藏的file input元素
  const input = document.createElement('input')
  input.type = 'file'
  input.accept = 'image/png,image/jpeg,image/gif'

  input.onchange = async (e) => {
    const file = e.target.files[0]
    if (!file) return

    // 检查文件大小（限制2MB）
    if (file.size > 2 * 1024 * 1024) {
      ElMessage.error('头像大小不能超过2MB')
      return
    }

    // 检查文件类型
    const validTypes = ['image/jpeg', 'image/png', 'image/gif']
    if (!validTypes.includes(file.type)) {
      ElMessage.error('只支持JPEG、PNG或GIF格式的图片')
      return
    }

    // 显示加载中
    const loading = ElLoading.service({
      lock: true,
      text: '头像上传中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })

    try {
      // 上传文件到服务器
      const formData = new FormData()
      formData.append('file', file)

      const uploadRes = await axios.post('/common/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      const newAvatarUrl = uploadRes.data.data;

      // 更新用户头像
      const updateRes = await axios.put('/user/updateAvatar/' + user.value.id + "?avatar=" + newAvatarUrl)

      // 更新本地数据
      user.value.avatarUrl = newAvatarUrl
      ElMessage.success('头像更新成功')
    } catch (error) {
      console.error('头像更新失败:', error)
      ElMessage.error(error.response?.data?.message || '头像更新失败')
    } finally {
      loading.close()
    }
  }

  // 触发文件选择
  input.click()
}

// 编辑个人资料方法，这里只是预留，具体逻辑需根据实际开发补充
const editProfile = () => {
  console.log('编辑个人资料功能待开发')
}

// 粉丝列表相关数据
const fansList = ref([]);
const fansPageNum = ref(1);
const fansPageSize = ref(10);
const fansTotal = ref(0);

// 关注列表相关数据
const followsList = ref([]);
const followsPageNum = ref(1);
const followsPageSize = ref(10);
const followsTotal = ref(0);

// 食堂店铺列表相关数据
const canteenShopList = ref([]);
const canteenShopPageNum = ref(1);
const canteenShopPageSize = ref(10);
const canteenShopTotal = ref(0);

// 操场&运动场列表相关数据
const playgroundList = ref([]);
const playgroundPageNum = ref(1);
const playgroundPageSize = ref(10);
const playgroundTotal = ref(0);

// 教学楼&学院楼列表相关数据
const teachingBuildingList = ref([]);
const teachingBuildingPageNum = ref(1);
const teachingBuildingPageSize = ref(10);
const teachingBuildingTotal = ref(0);

// 舞萌/中二出勤列表相关数据
const maimaiChunithmList = ref([]);
const maimaiChunithmPageNum = ref(1);
const maimaiChunithmPageSize = ref(10);
const maimaiChunithmTotal = ref(0);

// 获取粉丝列表
const fetchFansList = async (pageNum, pageSize) => {
  try {
    const userId = localStorage.getItem('id');
    if (!userId) {
      console.error('未获取到用户ID');
      return;
    }

    const response = await axios.get('/follow/page/fans', {
      params: {
        pageNum,
        pageSize,
        userId,
        nameSearch: '',
        order: 0
      }
    });

    if (response.data && response.data.data) {
      fansList.value = response.data.data.list;
      fansTotal.value = response.data.data.total;
    }
  } catch (error) {
    console.error('获取粉丝列表失败:', error);
    ElMessage.error('获取粉丝列表失败');
  }
}

// 获取关注列表
const fetchFollowsList = async (pageNum, pageSize) => {
  try {
    const userId = localStorage.getItem('id');
    if (!userId) {
      console.error('未获取到用户ID');
      return;
    }

    const response = await axios.get('/follow/page/follows', {
      params: {
        pageNum,
        pageSize,
        userId,
        nameSearch: '',
        order: 0
      }
    });

    if (response.data && response.data.data) {
      followsList.value = response.data.data.list;
      followsTotal.value = response.data.data.total;
    }
  } catch (error) {
    console.error('获取关注列表失败:', error);
    ElMessage.error('获取关注列表失败');
  }
}

// 粉丝分页变化处理
const handleFansPageChange = async (pageNum) => {
  fansPageNum.value = pageNum;
  await fetchFansList(pageNum, fansPageSize.value);
}

// 关注分页变化处理
const handleFollowsPageChange = async (pageNum) => {
  followsPageNum.value = pageNum;
  await fetchFollowsList(pageNum, followsPageSize.value);
}

// 粉丝分页大小变化处理
const handleFansSizeChange = async (newSize) => {
  fansPageSize.value = newSize;
  await fetchFansList(1, newSize);
}

// 关注分页大小变化处理
const handleFollowsSizeChange = async (newSize) => {
  followsPageSize.value = newSize;
  await fetchFollowsList(1, newSize);
}

// 获取食堂店铺列表
const fetchCanteenShopList = async (pageNum, pageSize) => {
  try {
    const userId = localStorage.getItem('id');
    const shopAuthor = localStorage.getItem('username');
    if (!userId) {
      console.error('未获取到用户ID');
      return;
    }

    const response = await axios.get(`/canteenshop/page/user`, {
      params: {
        pageNum,
        pageSize,
        shopName: '',
        shopAt: '',
        shopFloor: '',
        shopPayment: '',
        shopAuthor: shopAuthor,
        order: 0
      }
    });

    if (response.data && response.data.data) {
      canteenShopList.value = response.data.data.list;
      canteenShopTotal.value = response.data.data.total;
    }
  } catch (error) {
    console.error('获取食堂店铺列表失败:', error);
    ElMessage.error('获取食堂店铺列表失败');
  }
}

// 食堂店铺分页变化处理
const handleCanteenShopPageChange = async (pageNum) => {
  canteenShopPageNum.value = pageNum;
  await fetchCanteenShopList(pageNum, canteenShopPageSize.value);
}

// 食堂店铺分页大小变化处理
const handleCanteenShopSizeChange = async (newSize) => {
  canteenShopPageSize.value = newSize;
  await fetchCanteenShopList(1, newSize);
}

// 跳转到食堂店铺详情页
const goToCanteenShopDetail = (shopId) => {
  router.push(`/canteenShopDetail?shopId=${shopId}`);
}

// 跳转到操场&运动场详情页
const goToPlaygroundDetail = (playgroundId) => {
  router.push(`/PlaygroundDetail?playgroundId=${playgroundId}`);
}

// 跳转到教学楼&学院楼详情页
const goToTeachingBuildingDetail = (buildingId) => {
  router.push(`/teachingBuildingDetail?contentId=${buildingId}`);
}

// 跳转到舞萌/中二出勤详情页
const goToMCDetail = (mcId) => {
  router.push(`/MaimaiChunithmDetail?mcId=${mcId}`);
}

// 获取操场&运动场列表
const fetchPlaygroundList = async (pageNum, pageSize) => {
  try {
    const userName = localStorage.getItem('username');
    if (!userName) {
      console.error('未获取到用户名');
      return;
    }

    const response = await axios.get(`/playground/page/user`, {
      params: {
        pageNum,
        pageSize,
        contentAuthor: userName,
        nameSearch: '',
        order: 0
      }
    });

    if (response.data && response.data.data) {
      playgroundList.value = response.data.data.list;
      playgroundTotal.value = response.data.data.total;
    }
  } catch (error) {
    console.error('获取操场&运动场列表失败:', error);
    ElMessage.error('获取操场&运动场列表失败');
  }
}

// 操场&运动场分页变化处理
const handlePlaygroundPageChange = async (pageNum) => {
  playgroundPageNum.value = pageNum;
  await fetchPlaygroundList(pageNum, playgroundPageSize.value);
}

// 操场&运动场分页大小变化处理
const handlePlaygroundSizeChange = async (newSize) => {
  playgroundPageSize.value = newSize;
  await fetchPlaygroundList(1, newSize);
}

// 获取教学楼&学院楼列表
const fetchTeachingBuildingList = async (pageNum, pageSize) => {
  try {
    const userName = localStorage.getItem('username');
    if (!userName) {
      console.error('未获取到用户名');
      return;
    }

    const response = await axios.get(`/teachingBuilding/page/user`, {
      params: {
        pageNum,
        pageSize,
        contentAuthor: userName
      }
    });

    if (response.data && response.data.data) {
      teachingBuildingList.value = response.data.data.list;
      teachingBuildingTotal.value = response.data.data.total;
    }
  } catch (error) {
    console.error('获取教学楼&学院楼列表失败:', error);
    ElMessage.error('获取教学楼&学院楼列表失败');
  }
}

// 教学楼&学院楼分页变化处理
const handleTeachingBuildingPageChange = async (pageNum) => {
  teachingBuildingPageNum.value = pageNum;
  await fetchTeachingBuildingList(pageNum, teachingBuildingPageSize.value);
}

// 教学楼&学院楼分页大小变化处理
const handleTeachingBuildingSizeChange = async (newSize) => {
  teachingBuildingPageSize.value = newSize;
  await fetchTeachingBuildingList(1, newSize);
}

// 获取舞萌/中二出勤列表
const fetchMaimaiChunithmList = async (pageNum, pageSize) => {
  try {
    const userName = localStorage.getItem('username');
    if (!userName) {
      console.error('未获取到用户名');
      return;
    }

    const response = await axios.get(`/maimaiChunithm/page/user`, {
      params: {
        pageNum,
        pageSize,
        contentAuthor: userName,
        nameSearch: '',
        order: 0
      }
    });

    if (response.data && response.data.data) {
      maimaiChunithmList.value = response.data.data.list;
      maimaiChunithmTotal.value = response.data.data.total;
    }
  } catch (error) {
    console.error('获取舞萌/中二出勤列表失败:', error);
    ElMessage.error('获取舞萌/中二出勤列表失败');
  }
}

// 舞萌/中二出勤分页变化处理
const handleMaimaiChunithmPageChange = async (pageNum) => {
  maimaiChunithmPageNum.value = pageNum;
  await fetchMaimaiChunithmList(pageNum, maimaiChunithmPageSize.value);
}

// 舞萌/中二出勤分页大小变化处理
const handleMaimaiChunithmSizeChange = async (newSize) => {
  maimaiChunithmPageSize.value = newSize;
  await fetchMaimaiChunithmList(1, newSize);
}

onMounted(() => {
  fetchUserData()
})
</script>

<style scoped>
html, body {
  height: 100%;
  margin: 0;
}

.user-center {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: Zpix, sans-serif;
  line-height: 1.6;
}

/* 头部信息栏样式 */
.header-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  flex-shrink: 0;
}

.avatar-info {
  display: flex;
  align-items: center;
}

.avatar {
  margin-right: 20px;
}

.user-name-info {
  flex: 1;
  text-align: left;
}

.username {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.identity {
  color: #f5a623;
  font-size: 14px;
  margin-bottom: 5px;
}

.signature {
  color: #999;
  font-size: 14px;
  margin-bottom: 5px;
}

.uid {
  color: #999;
  font-size: 12px;
  margin-bottom: 5px;
}

.stats-info {
  display: flex;
}

.stat-item {
  margin-left: 20px;
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 14px;
  color: #999;
}

/* 主体内容样式 */
.main-content {
  display: flex;
  flex: 1;
}

/* 侧边栏样式 */
.sidebar {
  width: 200px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  margin-right: 20px;
  flex-shrink: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.icon-person {
  font-size: 20px;
  color: #1989fa;
  margin-right: 10px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  color: #333;
}

.sidebar-menu {
  list-style: none;
  padding: 0;
}

.menu-item {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.menu-item.active {
  background-color: #e6f7ff;
}

.icon-profile,
.icon-post,
.icon-collection,
.icon-fans,
.icon-follow {
  font-size: 16px;
  color: #999;
  margin-right: 10px;
}

.menu-text {
  font-size: 16px;
  color: #333;
}

/* 简介内容样式 */
.intro-content {
  flex: 1;
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow-y: auto;
}

.intro-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.operation-button {
  float: right;
}

.intro-table {
  width: 100%;
  border-collapse: collapse;
}

.intro-table th,
.intro-table td {
  border: 1px solid #f0f0f0;
  padding: 10px;
  text-align: left;
}

.intro-table th {
  color: #666;
  font-weight: 500;
}

/* 粉丝卡片样式 */
.fan-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow-y: auto;
  max-height: 300px;
}

.fan-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 100%;
}

.fan-avatar {
  margin-right: 10px;
}

.fan-info {
  flex: 1;
}

.fan-username {
  font-weight: bold;
}

.fan-signature {
  color: #999;
}

.fan-track-time {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}

/* 食堂店铺卡片样式 */
.canteen-shop-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.canteen-shop-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

.canteen-shop-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 10px;
}

.canteen-shop-info {
  flex: 1;
}

.canteen-shop-name {
  font-weight: bold;
}

.canteen-shop-description {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 操场&运动场卡片样式 */
.playground-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.playground-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

.playground-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 10px;
}

.playground-info {
  flex: 1;
}

.playground-title {
  font-weight: bold;
}

.playground-description {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 教学楼&学院楼卡片样式 */
.teaching-building-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.teaching-building-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

.teaching-building-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 10px;
}

.teaching-building-info {
  flex: 1;
}

.teaching-building-title {
  font-weight: bold;
}

.teaching-building-description {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 舞萌/中二出勤卡片样式 */
.maimai-chunithm-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.maimai-chunithm-card {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
}

.maimai-chunithm-image {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 10px;
}

.maimai-chunithm-info {
  flex: 1;
}

.maimai-chunithm-title {
  font-weight: bold;
}

.maimai-chunithm-description {
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 暗黑模式下的样式 */
[data-theme="dark"] .user-center {
  background-color: #121212;
  color: #fff;
}

[data-theme="dark"] .header-info {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .avatar-info .username {
  color: #fff;
}

[data-theme="dark"] .identity {
  color: #ff9800;
}

[data-theme="dark"] .signature,
[data-theme="dark"] .uid,
[data-theme="dark"] .stat-label {
  color: #777;
}

[data-theme="dark"] .stat-value {
  color: #fff;
}

[data-theme="dark"] .main-content {
  background-color: #121212;
}

[data-theme="dark"] .sidebar {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .icon-person,
[data-theme="dark"] .icon-profile,
[data-theme="dark"] .icon-post,
[data-theme="dark"] .icon-fans,
[data-theme="dark"] .icon-follow {
  color: #777;
}

[data-theme="dark"] .title,
[data-theme="dark"] .menu-text {
  color: #fff;
}

[data-theme="dark"] .menu-item.active {
  background-color: #282828;
}

[data-theme="dark"] .intro-content {
  background-color: #1e1e1e;
  border-color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .section-title {
  color: #fff;
}

[data-theme="dark"] .operation-button {
  background-color: #1989fa;
  border-color: #1989fa;
  color: #fff;
}

[data-theme="dark"] .intro-table th,
[data-theme="dark"] .intro-table td {
  border-color: #333;
  color: #fff;
}

[data-theme="dark"] .intro-table th {
  color: #999;
}

[data-theme="dark"] .fan-card,
[data-theme="dark"] .canteen-shop-card,
[data-theme="dark"] .playground-card,
[data-theme="dark"] .teaching-building-card,
[data-theme="dark"] .maimai-chunithm-card {
  border-color: #333;
  background-color: #282828;
}

[data-theme="dark"] .fan-username,
[data-theme="dark"] .canteen-shop-name,
[data-theme="dark"] .playground-title,
[data-theme="dark"] .teaching-building-title,
[data-theme="dark"] .maimai-chunithm-title {
  color: #fff;
}

[data-theme="dark"] .fan-signature,
[data-theme="dark"] .canteen-shop-description,
[data-theme="dark"] .playground-description,
[data-theme="dark"] .teaching-building-description,
[data-theme="dark"] .maimai-chunithm-description {
  color: #777;
}

[data-theme="dark"] .fan-track-time,
[data-theme="dark"] .canteen-shop-view,
[data-theme="dark"] .playground-view,
[data-theme="dark"] .teaching-building-view,
[data-theme="dark"] .maimai-chunithm-view {
  color: #777;
}

/* 添加过渡效果 */
[data-theme="dark"],
[data-theme="light"] {
  transition: background-color 0.3s, color 0.3s, border-color 0.3s; /* 添加过渡效果 */
}
</style>